<template>
  <el-form :model="user" :rules="rules" ref="CompanyInfo">
    <el-row :gutter="20">
      <!-- <el-col :span="12" :xs="24">
        <el-form-item label="企业名称">
          <el-input v-model.trim="user.companyName" />
        </el-form-item>
      </el-col> -->
			<el-col :span="12" :xs="24">
			  <el-form-item label="商户编号">
			    <el-input v-model.trim="user.identifier" readonly />
			  </el-form-item>
			</el-col>

      <!-- <el-col :span="12" :xs="24">
        <el-form-item v-if="user.type === 2" label="企业类型">
          <el-select v-model="user.companyType">
            <el-option v-for="item in companyTypeJson" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col> -->
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form-item label="业务联系人">
          <el-input v-model.trim="user.companyContactName" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item label="联系人电话">
          <el-input v-model.trim="user.companyContactMobile" />
        </el-form-item>
      </el-col>
    </el-row> -->
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form-item label="企业性质" prop="companyMature">
          <el-select v-model="user.companyMature">
            <el-option v-for="item in companyMatureData" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item label="企业规模" prop="companyScale">
          <el-select v-model="user.companyScale">
            <el-option v-for="item in companyScaleData" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form-item label="企业邮箱" prop="companyEmail">
          <el-input v-model.trim="user.companyEmail" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12" :xs="24">
        <el-form-item label="企业电话">
          <el-input v-model.trim="user.companyMobile" />
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form-item label="企业官网">
          <el-input v-model.trim="user.companySite" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item label="企业传真">
          <el-input v-model.trim="user.companyTax" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form-item label="所在城市" prop="selectedOptions">
          <AddressCascader ref="addressCascader" v-model="user.selectedOptions" @selectAddressDetail="selectAddressDetail" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12" :xs="24">
        <el-form-item label="微信公众号">
          <el-input v-model.trim="user.companyWeixin" />
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-form-item label="详细地址" prop="companyAddress">
          <el-input v-model.trim="user.companyAddress" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="注册资本" prop="companyMoney">
          <div class="flexInput">
            <el-input v-model.trim="user.companyMoney" type="number" />万元
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item label="企业LOGO">
          <Upload :default-image.sync="user.companyLogo" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="主营分类" required>
      <Cascader v-model="companySaleCategorys" :options="categoryData" :ids="companySaleCategoryIds" :props="props"
        ref="companySaleCategorys" />
      <!-- <el-input v-model.trim="user.companySaleCategoryIds" /> -->
    </el-form-item>
    <el-form-item label="主要采购" required>
      <Cascader v-model="companyBuyCategorys" :options="categoryData" :ids="companyBuyCategoryIds" :props="props"
        ref="companyBuyCategorys" />
      <!-- <el-input v-model.trim="user.companyBuyCategoryIds" /> -->
    </el-form-item>
    <el-form-item label="企业介绍" prop="companyDescription">
      <el-input v-model.trim="user.companyDescription" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit('CompanyInfo')">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import AddressCascader from '@/components/AddressCascader'
import Cascader from '@/components/Cascader'
import Upload from '@/components/Upload'
import { dictListByQo } from '@/api/system'
import { categoryPageVoByQo } from '@/api/product'
export default {
  components: { AddressCascader, Cascader, Upload },
  data() {
    return {
      companyTypeJson: Object.assign({}, this.$store.state.user.companyTypeJson),
      user: Object.assign({}, this.$store.getters.userInfo),
      selectedOptions: [],
      companyMatureData: [],
      companyScaleData: [],
      categoryData: [],
      companySaleCategorys: [],
      companyBuyCategorys: [],
      companySaleCategoryIds: '',
      companyBuyCategoryIds: '',
      props: { multiple: true, value: 'id', label: 'name' },
      rules: {
        companyMature: [{required: true,message: '请输入',trigger: 'blur'}],
        companyScale: [{required: true,message: '请输入',trigger: 'blur'}],
        companyEmail: [{required: true,message: '请输入',trigger: 'blur'}],
        selectedOptions: [{type: "array", required: true,message: '请输入',trigger: 'blur'}],
        companyAddress: [{required: true,message: '请输入',trigger: 'blur'}],
        companyMoney: [{required: true,message: '请输入',trigger: 'blur'}],
        companyDescription: [{required: true,message: '请输入',trigger: 'blur'}],
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    userInfo(val) {
      this.user = Object.assign({}, val)
      this.init(val)
    },
    companySaleCategorys(val) {
      this.$set(this.user, `companySaleCategoryIds`, this.$refs['companySaleCategorys'].getIds(val))
    },
    companyBuyCategorys(val) {
      this.$set(this.user, `companyBuyCategoryIds`, this.$refs['companyBuyCategorys'].getIds(val))
    }
  },
  created() {
    this.getCompanyType('companyMature')
    this.getCompanyType('companyScale')
    this.getCategory()
  },
  methods: {
    init(val) {
      this.$nextTick(() => {
        if (val.companyDistrictId) {
          this.selectedOptions = [val.companyProvinceId.toString(), val.companyCityId.toString(), val.companyDistrictId.toString()]
        } else {
          this.selectedOptions = ''
        }
        this.$set(this.user, 'selectedOptions', this.selectedOptions);
        this.companySaleCategoryIds = val.companySaleCategoryIds || '';
        this.companyBuyCategoryIds = val.companyBuyCategoryIds || '';
      })
    },
    selectAddressDetail(value) {
      this.$refs.CompanyInfo.validateField('selectedOptions');
      if (value) {
        this.$set(this.user, `companyProvinceId`, value.provinceId)
        this.$set(this.user, `companyProvinceName`, value.provinceName)
        this.$set(this.user, `companyCityId`, value.cityId)
        this.$set(this.user, `companyCityName`, value.cityName)
        this.$set(this.user, `companyDistrictId`, value.districtId)
        this.$set(this.user, `companyDistrictName`, value.districtName)
      } else {
        this.$set(this.user, `companyProvinceId`, '')
        this.$set(this.user, `companyProvinceName`, '')
        this.$set(this.user, `companyCityId`, '')
        this.$set(this.user, `companyCityName`, '')
        this.$set(this.user, `companyDistrictId`, '')
        this.$set(this.user, `companyDistrictName`, '')
      }
    },
    getCompanyType(code) {
      dictListByQo({ code: code }).then((res) => {
        this.$set(this, `${code}Data`, res)
      })
    },
    getCategory() {
      categoryPageVoByQo().then((res) => {
        let array = [];
        res.forEach(function(item, index) {
        	let data = {};
        	data.name = item.name;
        	data.id = item.id;
          array.push(data);
        });
        // this.$set(this, 'categoryData', res || [])
        this.$set(this, 'categoryData', array || [])
        if (this.$store.getters.userInfo) {
          this.init(this.$store.getters.userInfo)
        }
      })
    },
    submit(CompanyInfo) {
      if (!this.user.companySaleCategoryIds || this.user.companySaleCategoryIds.length === 0) {
        this.$message.error("请选择主营分类");
        return;
      }
      if (!this.user.companyBuyCategoryIds || this.user.companyBuyCategoryIds.length === 0) {
        this.$message.error("请选择主要采购");
        return;
      }

      const params = Object.assign({}, this.user);
      this.$refs[CompanyInfo].validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/updateMember', params).then((res) => {
            this.$message({
              message: '编辑成功',
              type: 'success',
              duration: 5 * 1000
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.flexInput {
  display: flex;
  width: 100%;
  .el-input {
    width: auto;
    flex: 1;
  }
}
</style>
